<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1> indexDB操作 </h1>

<button onclick="add()"> 新增数据 </button>
<button onclick="read()"> 读取数据 </button>
<button onclick="readAll()"> 遍历数据 </button>
<button onclick="update()" > 更新数据</button>
<button onclick="remove()" >删除数据项</button>
<script >
    var db;
    var request = window.indexedDB.open('db1', 5);
    request.onerror = function (event) {
        console.log('数据库打开报错');
    };
    request.onsuccess = function (event) {
        db = request.result;
        console.log('数据库打开成功');
    };

    // 构建数据库
    request.onupgradeneeded = function(event) {
        db = event.target.result;
        var objectStore = db.createObjectStore('person', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
    }

    // 新增数据
    function add() {
        console.log(db)
        var request = db.transaction(['person'], 'readwrite')
            .objectStore('person')
            .add({ id: 4, name: '露西', age: 224, email: '1angsan@example.com' });

        request.onsuccess = function (event) {
            console.log('数据写入成功');
        };

        request.onerror = function (event) {
            console.log('数据写入失败');
        }
    }

    // 读取数据
    function read() {
        var transaction = db.transaction(['person']);
        var objectStore = transaction.objectStore('person');
        var request = objectStore.get(2);

        request.onerror = function(event) {
            console.log('事务失败');
        };

        request.onsuccess = function( event) {
            if (request.result) {
                console.log('Id: ' + request.result.id);
                console.log('Name: ' + request.result.name);
                console.log('Age: ' + request.result.age);
                console.log('Email: ' + request.result.email);
            } else {
                console.log('未获得数据记录');
            }
        };
    }
    //ML

    // 遍历数据
    function readAll() {
        var objectStore = db.transaction('person').objectStore('person');

        objectStore.openCursor().onsuccess = function (event) {
            var cursor = event.target.result;

            if (cursor) {
                console.log('Id: ' + cursor.key);
                console.log('Name: ' + cursor.value.name);
                console.log('Age: ' + cursor.value.age);
                console.log('Email: ' + cursor.value.email);
                cursor.continue();
            } else {
                console.log('没有更多数据了！');
            }
        };
    }

    // 更新数据
    function update() {
        var request = db.transaction(['person'], 'readwrite')
            .objectStore('person')
            .put({ id: 2, name: '李四', age: 20, email: '1zhangsan@example.com' });

        request.onsuccess = function (event) {
            console.log('数据更新成功');
        };

        request.onerror = function (event) {
            console.log('数据更新失败');
        }
    }


    // 删除数据
    function remove() {
        var request = db.transaction(['person'], 'readwrite')
            .objectStore('person')
            .delete(1);

        request.onsuccess = function (event) {
            console.log('数据删除成功');
        };
    }
</script>
</body>
</html>